<template>
  <div class="project-detail" style="max-width: 100vw;max-height: 100vh">
      <el-menu  style="width: 20vw;max-width: 100px" collapse :default-active="active" class="sider-menu" router>
        <el-menu-item style="padding: 0 1vw" index="baseInfo">
          基本信息
        </el-menu-item>
        <el-menu-item style="padding: 0 1vw" index="duration">
          项目工序
        </el-menu-item>
        <el-menu-item style="padding: 0 1vw" index="question">
          项目问题
        </el-menu-item>
        <el-menu-item style="padding: 0 1vw" index="analyse">
          数据分析
        </el-menu-item>
        <el-menu-item style="padding: 0 1vw" index="expenses">
          项目花费
        </el-menu-item>
        <el-menu-item style="padding: 0 1vw" index="collection">
          项目收款
        </el-menu-item>
      </el-menu>
      <router-view style="width: 80vw" :projectInfo="projectInfo"/>

  </div>
</template>

<script>
export default {
  data() {
    return {
      active: '',
      id: 0,
      projectInfo: {}
    }
  },
  methods: {
    getProjectById() {
      this.$http(`/admin/auth/getProject?id=${this.id}`).then(res => {
        if (res.data.status == 200) {
          this.projectInfo = res.data.data
        } else {
          this.$message({
            type: "error",
            message: res.data.message
          })
        }
      })
    }
  },
  mounted() {
    this.id = this.$route.params.id
    this.getProjectById()
    this.active = this.$route.path.split("/")[this.$route.path.split("/").length - 1]
  }
}
</script>

<style scoped lang="less">
.project-detail {
  background-color: #f5f5f5;
  width: 100%;
  height: 100vh;
  padding-top: 30px;
  box-sizing: border-box;
  .box-card {
    position: relative;
    width: 1100px;
    height: 90vh;
    margin: 0 auto;
    .sider-menu {
      position: absolute;
      top: 0;
      left: 0;
      display: inline-block;
      width: 200px;
      height: 90vh;
    }
  }
}
</style>
